﻿<%@ Page Title="" Language="C#" MasterPageFile="~/controlasistencia/Plantilla.Master" AutoEventWireup="true" CodeBehind="reportes.aspx.cs" Inherits="Presentacion.controlasistencia.reportes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="css/plugins/morris/morris.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contenido" runat="server">

    <div class="row">
        <div class="col-lg-12">
            <div class="page-title">
                <h1>Reportes de Asistencia</h1>
            </div>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- Basic Accordion Example -->
    <div class="row">
        <div class="col-lg-12">

            <div class="portlet portlet-default">
                <div class="portlet-heading">

                    <div class="clearfix"></div>
                </div>
                <div class="portlet-body">
                    
                    <div class="panel-group" id="accordion">
                        <% 
                            if (Session["idDocente"] != null)
                            {
                                try
                                {
                                    string id = Session["idDocente"].ToString();
                                    Presentacion.servicioDocente.DocenteServicioSoapClient _objDocente = new Presentacion.servicioDocente.DocenteServicioSoapClient();
                                    var resul = _objDocente.DistribucionXidDocente(Convert.ToInt32(id));
                                    if (resul.Count() > 0)
                                    {
                                        foreach (var item in resul)
                                        {
                                            //identificadores tab
                                            int tab1 = item.Cod_Distribucion * 2;
                                            int tab2 = item.Cod_Asignatura + item.Cod_Distribucion;
                                            //identificadores select mensual
                                            int select1 = item.Cod_Asignatura;
                                            int select2 = item.Cod_Distribucion * 4;
                                            //identificadores select general
                                            int select3 = item.Cod_Distribucion * 6;
                        %>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#<%Response.Write(item.Cod_Distribucion.ToString()); %>"><% Response.Write(item.Nombre.ToString()); %></a>
                                </h4>
                            </div>
                            <div id="<%Response.Write(item.Cod_Distribucion.ToString()); %>" class="panel-collapse collapse ">
                                <div class="panel-body">
                                    <div class="portlet portlet-green">
                                        <div class="portlet-heading">
                                            <div class="portlet-widgets">
                                                <ul id="myTab" class="list-inline">
                                                    <li class=""><a class="btn btn-xs btn-orange" href="#<%Response.Write(tab1);%>" data-toggle="tab">Mensual</a>
                                                    </li>
                                                    <li><a class="btn btn-xs btn-orange" href="#<%Response.Write(tab2);%>" data-toggle="tab">General</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div id="purplePortlet" class="panel-collapse in">


                                            <div class="portlet-body">
                                                <div id="myTabContent" class="tab-content">
                                                    <div class="tab-pane fade in active" id="<%Response.Write(tab1);%>">
                                                        
                                                        <div class="col-lg-8">
                                                            Escoga el periodo:
                                                            <select class="form-control" id="<%Response.Write(select1);%>" onchange="traerMeses(<%Response.Write(select1);%>,<%Response.Write(select2);%>);" onclick="traerMeses(<%Response.Write(select1);%>,<%Response.Write(select2);%>);">
                                                                <option value="" selected="selected"></option>
                                                            <% Negocio.catalogos.catalogoPeriodo _objPeriodo = new Negocio.catalogos.catalogoPeriodo();
                                                               var resul_periodo = _objPeriodo.obtenerPeriodoXDistribucion(item.Cod_Distribucion);
                                                               if (resul_periodo.Count() > 0)
                                                               {
                                                                   foreach (var item2 in resul_periodo)
                                                                   {
                                                            %>
                                                            <option value="<%Response.Write(item2.idPeriodo);%>"><%Response.Write(item2.nombre);%></option>
                                                           <% 
                                                                   }
                                                                }
                                                            %>
                                                        </select>
                                                        </div>
                                                        <div class="col-lg-4">
                                                            Escoga un mes:
                                                                <select class="form-control" id="<%Response.Write(select2);%>">
                                                                </select>
                                                        </div>
                                                        <p>&nbsp;</p>
                                                        <button type="button" class="btn btn-green btn-block" onclick="generarMensual(<%Response.Write(int.Parse(item.Cod_Distribucion.ToString()));%>,<%Response.Write(select1);%>,<%Response.Write(select2);%>,'<%Response.Write(item.Nombre);%>','<%Response.Write(item.Semestre);%>','<%Response.Write(item.Paralelo);%>','<%Response.Write(item.Carrera);%>');" data-toggle="modal" data-target="#modalMensual">Generar Reporte</button>
                                                    </div>
                                                    <div class="tab-pane fade" id="<%Response.Write(tab2);%>">
                                                        <select class="form-control" id="<%Response.Write(select3);%>" >
                                                            <%
                                                                if(resul_periodo.Count()>0)
                                                                    foreach (var item3 in resul_periodo)
                                                                    { 
                                                            %>
                                                            <option value="<%Response.Write(item3.idPeriodo);%>" selected="selected"><%Response.Write(item3.nombre);%></option>              
                                                            <%     
                                                                    }
                                                            %>  
                                                        </select>
                                                        <p>&nbsp;</p>
                                                        <button type="button" class="btn btn-green btn-block" onclick="generarGeneral(<%Response.Write(select3);%>,<%Response.Write(item.Cod_Distribucion);%>,'<%Response.Write(item.Nombre);%>','<%Response.Write(item.Semestre);%>','<%Response.Write(item.Paralelo);%>','<%Response.Write(item.Carrera);%>');" data-toggle="modal" data-target="#modalSemestral">Generar Reporte</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%               
                                        }//cierre de foreach
                                    }//cierre de if 
                                } //cierre de try
                                catch (HttpException e)
                                {
                                    throw e;
                                }
                            } //cierre de if session
                        %>
                    </div>
                </div>
                <!-- /.portlet-body -->
            </div>
            <!-- /.portlet -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->

    <!-- end TABS/ACCORDIONS EXAMPLE ROWS -->

    <!--MODAL DEL REPORTE-->

    <div class="modal" id="modalMensual" tabindex="-1" role="dialog" aria-labelledby="flexModalLabel" aria-hidden="true" style="height: 600px; width: auto; overflow-x: hidden;" onkeydown="compruebaTecla();">

        <form runat="server" onkeydown="compruebaTecla();">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
        </form>
        <div align="right" id="botonPDF">
            <button class="btn btn-danger" type="button" onclick="window.open('ReporteMensual.aspx','_blank')">PDF!</button>
        </div>
    </div>
    <div class="modal modal-flex" id="modalSemestral" tabindex="-1" role="dialog" aria-labelledby="flexModalLabel" aria-hidden="true" style="height: 600px; width: auto; overflow-x: hidden;">
        <div align="right" id="botonPDF2">
            <button class="btn btn-danger" type="button" onclick="">PDF!</button>
        </div>
    </div>

    <br>
    <br>
    <br>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">
    <!-- PAGE LEVEL PLUGIN SCRIPTS -->
    <script src="js/plugins/morris/raphael-2.1.0.min.js"></script>
    <script src="js/plugins/morris/morris.js"></script>
    <script src="js/plugins/morris/morris-demo-data.js"></script>
    <script type="text/javascript">
        /////REPORTE SEMESTRALES       
        //Manipulador de los datos de la barra
        var estado2 = false;
        
        /// reporte general de todos los meses
        function datosBarHoras(horas) {
            var cadena = horas.split("$");
            //var datosBar = cadena[2];
            var array = cadena[2].split(",");
            ////contenedor
            var contenedor = [];
            ///mes 1
            var caja = [array[0],array[1],array[2]];
            var mes1={};
            for (var i = 0; i < 3; i++) {
                mes1[i] = caja[i];
            }
            ///mes 2
            var caja2 = [array[3], array[4], array[5]];
            var mes2 = {};
            for (var i = 0; i < 3; i++) {
                mes2[i] = caja2[i];
            }
            //mes 3
            var caja3 = [array[6], array[7], array[8]];
            var mes3 = {};
            for (var i = 0; i < 3; i++) {
                mes3[i] = caja3[i];
            }
            //mes 4
            var caja4 = [array[9], array[10], array[11]];
            var mes4 = {};
            for (var i = 0; i < 3; i++) {
                mes4[i] = caja4[i];
            }
            //mes 5
            var caja5 = [array[12], array[13], array[14]];
            var mes5 = {};
            for (var i = 0; i < 3; i++) {
                mes5[i] = caja5[i];
            }
            //mes 6
            var mes6 = {};
            if (array[15] != "" && array[16] != "" && array[17] != "") {
                var caja6 = [array[15], array[16], array[17]];
                
                for (var i = 0; i < 3; i++) {
                    mes6[i] = caja6[i];
                }
            }
            //mes 7
            var mes7 = {};
            if (array[18] != "" && array[19]!="" && array[20]!="") {
                var caja7 = [array[18], array[19], array[20]];
                
                for (var i = 0; i < 3; i++) {
                    mes7[i] = caja7[i];
                }
            }
            //llenando contenedor
            if (mes1 != "") { contenedor = [mes1] }
            if (mes2 != "") { contenedor = [mes1, mes2] }
            if (mes3 != "") { contenedor = [mes1, mes2, mes3] }
            if (mes4 != "") { contenedor = [mes1, mes2, mes3, mes4] }
            if (mes5 != "") { contenedor = [mes1, mes2, mes3, mes4, mes5] }
            if ($.isEmptyObject(mes6)) { contenedor = [mes1, mes2, mes3, mes4, mes5]  }
            else { contenedor = [mes1, mes2, mes3, mes4, mes5, mes6]  }
            if ($.isEmptyObject(mes7)) { contenedor = [mes1, mes2, mes3, mes4, mes5, mes6] }
            else { contenedor = [mes1, mes2, mes3, mes4, mes5, mes6, mes7] }
            
            Morris.Bar({
                element: 'modalSemestral',
                resize: true,
                barColors: ["#b4045c", "#045cb4"],
                gridTextColor: "#ffffff",
                gridTextSize: 18,
                data: contenedor,
                xkey: '0',
                ykeys: ['1', '2'],
                labels: ['Horas trabajadas', 'Horas NO trabajadas']
            });
        }
        //Manipulador de los datos del donutchar para los estudiantes acreditados
        function datosDonutEstudiantesSemestral() {
            Morris.Donut({
                element: 'modalSemestral',
                resize: true,
                data: [
                    { label: "Estudiantes acreditados", value: 25 },
                    { label: "Estudiantes NO acreditados", value: 25 }
                ],
                labelColor: '#ffffff',
                colors: ["#045FB4", "#DF3A01"],
                backgroundColor: ["#045FB4", "#DF3A01"],
                formatter: function (x) { return x + "%" }
            });
        }
        //Manipulador de los datos del donutchar para las horas trabajadas durantes el semestre
        var divClone2 = $("#modalSemestral").clone(true);
        function datosDonutHorasSemestral(horas) {
            //divido la cadena entrante en los 2 valores principales
            var cadena = horas.split("$");
            //divido cada valor por separado de las ","
            var horaT = cadena[0];
            var horaTrabajada = horaT.replace(",", ".");
            var horaTN = cadena[1];
            var horaNotrabajada = horaTN.replace(",", ".");
            if (parseInt(horaTrabajada) > 0) {
                document.getElementById('modalSemestral').innerHTML = "";
                var divBoton = "<div align='right'><button class='btn btn-danger type='button' onclick=window.open('ReporteSemestral.aspx','_blank')>PDF!</button></div>";
                $('#modalSemestral').append(divBoton);
                $("#modalSemestral").replaceWith(divClone2);
                $("#modalSemestral").show();
                Morris.Donut({
                    element: 'modalSemestral',
                    resize: true,
                    data: [
                        { label: "Horas trabajadas", value: horaTrabajada },
                        { label: "Horas NO trabajadas", value: horaNotrabajada }
                    ],
                    labelColor: '#ffffff',
                    colors: ["#04B404", "#FFBF00"],
                    backgroundColor: ["#04B404", "#FFBF00"],
                    formatter: function (x) { return x + "%" }
                });
                estado2 = true;
            }
            else {
                estado2 = false;
                var resultado = confirm(horas);
                if (resultado) {
                    $('.modal').modal('hide')
                } else {
                    $('.modal').modal('hide')
                }
            }
        }
        ///FUNCION PARA LANZAR EL MODAL SEMESTRAL
        
        function abrirmodalGeneral(horas) {
            if (estado2 == true) { return }
            else {
                $('#modalSemestral').hide();
                $('#botonPDF2').hide();
                //datosDonutEstudiantesSemestral();
                datosDonutHorasSemestral(horas);
                datosBarHoras(horas);
            }
        }
        function generarGeneral(select3, codigo, nombreMateria, semestre, paralelo, carrera) {
            $('#botonPDF2').hide();
            idPeriodo = 0;
            idPeriodo = document.getElementById(select3).value;
            PageMethods.obtenerReporteGeneral(idPeriodo,codigo,nombreMateria,semestre,paralelo,carrera,abrirmodalGeneral)
        }
        


        ////REPORTE MENSUALES
        //MANIPULACION DE DONUT CHART
        //colores
        //verde "#04B404"
        //amarillo "#FFBF00"
        //azul "#045FB4"
        // rojo "#DF3A01"
        //Manipulador de los datos del donutchar para los estudiantes acreditados
        //para manipular el estado de los donuts
        var estado = false;
        ///para clonar el div modal mensual
        var divClone = $("#modalMensual").clone(true);
        //Manipulador de los datos del donutchar para las horas trabajadas durantes el mes
        function datosDonutHoras(horas) {
            if (horas == "No se pueden generar datos.") {
                alert(horas);
            }
            else
            {
            
                        //divido la cadena entrante en los 2 valores principales
                        var cadena = horas.split("/");
                        //divido cada valor por separado de las ","
                        var cadena_v1 = cadena[0].replace(",", ".");
                        //reemplazo cada valor por separado 
                        var cadena_v2 = cadena[1].replace(",", ".");
                        if (parseInt(cadena_v1) > 0 || parseInt(cadena_v1)==0) {
                            document.getElementById('modalMensual').innerHTML = "";
                            var divBoton = "<div align='right'><button class='btn btn-danger type='button' onclick=window.open('ReporteMensual.aspx','_blank')>PDF!</button></div>";
                            $('#modalMensual').append(divBoton);
                            $("#modalMensual").replaceWith(divClone);
                            $("#modalMensual").show();
                            Morris.Donut({
                                element: 'modalMensual',
                                resize: true,
                                data: [
                                    { label: "Horas trabajadas", value: cadena_v1 },
                                    { label: "Horas NO trabajadas", value: cadena_v2 },
                                ],
                                labelColor: '#ffffff',
                                colors: ["#04B404", "#FFBF00"],
                                backgroundColor: ["#04B404", "#FFBF00"],
                                formatter: function (x) { return x + "%" }
                            });
                            estado = true;
                        } else {
                            estado = false;
                            var resultado = confirm(horas);
                            if (resultado) {
                                $('.modal').modal('hide')
                            } else {
                                $('.modal').modal('hide')
                            }
                        }
            }
        }
        //LANZAR EL MODAL DE REPORTE MENSUAL!
        function abrirModalMensual(horas) {
            if (estado == true) { return }
            else {
                $('#botonPDF').hide();
                $('#modalMensual').hide();
                datosDonutHoras(horas);
            }
        }
        
        //window.onkeyup = compruebaTecla;
        window.onkeydown = compruebaTecla;
        function compruebaTecla() {
            var e = window.event;
            var tecla = (document.all) ? e.keyCode : e.which;
            if (tecla == 27) {
                estado = false;
                estado2 = false;
                document.getElementById('modalMensual').style.display = 'none';
                document.getElementById('modalSemestral').style.display = 'none';
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            }
        }
        //para generar el reporte mensual
        function generarMensual(distribucion, select1, select2, nombreDistribucion, semestre, paralelo,carrera) {
            $('#botonPDF').hide();
            var nombre = nombreDistribucion;
            var numeroMes = 0;
            var periodo = 0;
            periodo = document.getElementById(select1).value;
            numeroMes= document.getElementById(select2).value;
            PageMethods.obtenerHorasDistribucion(distribucion, periodo, numeroMes, nombre, semestre,paralelo,carrera, abrirModalMensual);
        }

        ////// funcion ajax para actualizar el select del mes con respecto al select del periodo
        function traerMeses(select1, select2) {
            var idPeriodo = 0;
            idPeriodo = document.getElementById(select1).value;
            var conexion;
            if (window.XMLHttpRequest) {
                conexion = new XMLHttpRequest;
            }
            else
            {
                conexion = new ActiveXObject("Microsoft.XMLHTTP");
            }
            conexion.onreadystatechange = function () {
                if (conexion.readyState == 4 && conexion.status == 200) {
                document.getElementById(select2).innerHTML = conexion.responseText;
                }
            }
            conexion.open("GET","mesesAjax.aspx?id=" + idPeriodo, true);
            conexion.send();
        }
    </script>

</asp:Content>
